﻿<div class="content-wrapper">
    <section class="content-header">
        <h1>
            报警查看
            <small>报警记录</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="#">报警查看</a></li>
            <li class="active">报警记录</li>
        </ol>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-body">
                        <div class="input-group">
                            <span class="input-group-addon">日期范围</span>
                            <input type="text" v-model="datemin" ref="datemin" id="datemin" class="form-control" style="width:120px;" placeholder="开始时间">
                            <input type="text" v-model="datemax" ref="datemax" id="datemax" class="form-control" style="width:120px;">
                        </div>
                        <div id="toolbar" class="btn-group">
                            <button id="btn_search" v-on:click="searchL" type="button" class="btn btn-default">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询
                            </button>
                        </div>
                        <table id="bootstraptable" class="table table-bordered text-nowrap table-hover"></table>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@section scripts{
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                datemin: '',
                datemax: ''
            },
            mounted: function () {
                var _self = this;
                _self.$nextTick(function () {
                    //显示active
                    _self.$refs.DeviceAlarmHistory.parentNode.parentNode.classList.add("active");
                    _self.$refs.DeviceAlarmHistory.classList.add("active");

                    //_self.datemin = _self.getCurrentMonthFirst();
                    _self.datemax = _self.getCurrentMonthLast();
                    $('#datemin').datetimepicker({
                        format: 'yyyy-mm-dd',
                        minView: 2,
                        autoclose: true,
                        language: "zh-CN"
                    });
                    $('#datemax').datetimepicker({
                        format: 'yyyy-mm-dd',
                        minView: 2,
                        autoclose: true,
                        language: "zh-CN"
                    });
                    setTimeout(function () {
                        _self.loadL();
                        setDataCardView("#bootstraptable");
                        $("div[class='pull-right search']")[0].children[0].setAttribute("placeholder", "站点名称");
                    }, 500);
                });
            },
            methods: {
                loadL: function () {
                    _self = this;
                    var obj = [{
                        field: 'no',
                        title: '#',
                        valign: 'middle',
                        formatter: function (value, row, index) {
                            return index + 1;
                        }
                    }, {
                        field: 'HistoryId',
                        title: 'Id',
                        visible: false
                    },
                    {
                        field: 'ClientName',
                        title: '站点名称',
                        align: 'center',
                        valign: 'middle',
                        sortable: true
                    },
                    {
                        field: 'DeviceName',
                        title: '报警设备',
                        align: 'center',
                        valign: 'middle',
                        sortable: true
                    }, {
                        field: 'AlarmDetails',
                        title: '报警信息',
                        align: 'left',
                        formatter: function (value, row, index) {
                            var start_time = _self.jsonDateFormat(row.CreateDate);
                            var end_time = _self.jsonDateFormat(row.EndTime);
                            var alarm_info = row.AlarmDetail;
                            return "<span>发生时间：" + start_time + "</span><br/>" +
                                "<span> 恢复时间：" + end_time + "</span> <br /> " +
                                "<span>报警内容：" + alarm_info + "</span>"
                        }
                    }, {
                        field: 'ConfirmDetails',
                        align: 'left',
                        title: '确认信息',
                        formatter: function (value, row, index) {
                            var confirm_time = _self.jsonDateFormat(row.ConfirmTime);
                            var confirm_person = row.ConfirmPerson;
                            var confirm_info = row.ConfirmInfo;
                            return "<span>发生时间：" + confirm_time + "</span><br/>" +
                                "<span> 恢复时间：" + confirm_person + "</span> <br /> " +
                                "<span>报警内容：" + confirm_info + "</span>"
                        }
                    }, {
                        field: 'Action1',
                        title: '查看',
                        align: 'center',
                        valign: 'middle',
                        formatter: function (value, row, index) {
                            let result = "";
                            result += "<a class='btn btn-primary' href='/DeviceAlarmHistory/DetailIndex?HistoryId=" + row.HistoryId + "' >详情</a>";
                            return result;
                        }
                    }, {
                        field: 'Action2',
                        title: '确认巡检',
                        align: 'center',
                        valign: 'middle',
                        formatter: function (value, row, index) {
                            let result = "";
                            result += "<a class='btn btn-primary' href='/Inspection/Index?ClientName=" + row.ClientName + "&DeviceName=" + row.DeviceName + "' >确认巡检</a>"
                            return result;
                        }
                    }];
                    yui.table("bootstraptable", "/DeviceAlarmHistory/List", obj, "POST", "ClientId");
                },
                searchL: function () {
                    $("#bootstraptable").bootstrapTable('refresh');
                }
            }
        });
    </script>
}